<script setup>
import { useCounterStore } from "@/stores/menu.js"
import { ref } from "vue";
import { useRoute } from "vue-router";
const route = useRoute()

import { useRouter } from "vue-router";
const router = useRouter()



const CounterStore = useCounterStore()

// 点击关闭tag
const shanchu = (item,index,itemname) => {


  if ( index === CounterStore.selectMenu.length-1) { // 判断是否是最后一位
    if (CounterStore.selectMenu.length === 1) { // 删除最后一位的时候返回首页
      CounterStore.removeMenu(itemname)
      router.push('/')
    }else{ //
      CounterStore.removeMenu(itemname)
      router.push({
        path: CounterStore.selectMenu[index -1 ].path
      })
    }
  }else{
    CounterStore.removeMenu(itemname)
    router.push({
      path:CounterStore.selectMenu[index].path
    })

  }


}


// 获取头像、昵称
const userdata = ref()
userdata.value = JSON.parse(localStorage.getItem('user'))


// 退出登录
const tuichu = () => {
  localStorage.removeItem('pz_token')
  localStorage.removeItem('user')
  router.push('/login')
}

</script>

<template>
  <div class="header-container">
    <div class="header-left flex-box" >
      <el-icon @click="CounterStore.caidan()" class="icon" size="20"><Fold /></el-icon>
      <ul class="flex-box">
        <li v-for="(itemdata,index) in CounterStore.selectMenu"
        :key="itemdata.id"
        :class="{selected:route.path === itemdata.path}"
        class="tab flex-box"
        >
        <el-icon  size ="15">
          <component :is="itemdata.icon"></component>
        </el-icon>
          <router-link class="text flex-box" :to="{ path: itemdata.path }">
            {{ itemdata.name }}
          </router-link>
          <el-icon class="close" @click="shanchu(itemdata,index,itemdata.name)"><Close /></el-icon>
        </li>
      </ul>
    </div>
    <div class="header-right">
        <el-dropdown>
    <span class="el-dropdown-link flex-box">
       <el-avatar
        :src="userdata.avatar"
      />
      <p>{{userdata.name}}</p>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item divided  @click="tuichu">退出</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
    </div>
  </div>
</template>

<style lang="less" scoped>
.flex-box{
  display: flex;
  align-items: center;
  height: 100%;

}

.header-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  background-color: #fff;
  padding-right: 25px;
  .header-left {
    height: 100%;
    .icon {
      width: 45px;
      height: 100%;
    }
    .tab{
      padding: 0 10px;
      height: 100%;
      .text{
        margin: 0 5px;
      }
      .close{
        visibility: hidden;
      }
      &.selected{
        a{
          color: #409eff;
        }
        i {
          color: #409eff;
        }
        background-color: #f5f5f5;
      }
    }
    .tab:hover{
      background-color: #f5f5f5;
      .close{
        visibility: inherit;
        cursor: pointer;
        color: #000;

      }
    }
    .icon:hover{
      background-color: #f5f5f5;
      cursor: pointer;
    }
  }
  a{
    height: 100%;
    color: #333;
    font-size: 15px;
  }
}


</style>
